<!--  -->
<template>
  <div class="registerBox" v-show="show == 1">
    <div v-show="!gologin">
      <div class="title">
        <p>注册</p>
        <i class="icon" :class="{ icon5: urlParams.version == 5 }"></i>
      </div>
      <div
        class="input_line input_phone clear"
        :class="{ active: curFocus == 'phone' }"
      >
        <label class="fl" for="phoneNumber">
          <i class="icon sp-shouji"></i>
        </label>
        <input
          class="fl"
          type="text"
          name="phoneNumber"
          @focus="curFocus = 'phone'"
          @blur="curFocus = ''"
          v-model.trim="send.phoneNumber"
          placeholder="输入手机号"
        />
      </div>
      <div
        class="input_line input_phoneAuthCode clear"
        :class="{ active: curFocus == 'AuthCode' }"
      >
        <label class="fl" for="phoneAuthCode">
          <i class="icon sp-yanzhengma"></i>
        </label>
        <input
          class="fl"
          type="text"
          name="phoneAuthCode"
          @focus="curFocus = 'AuthCode'"
          @blur="curFocus = ''"
          v-model.trim="send.phoneAuthCode"
          maxlength="6"
          placeholder="短信验证码"
        />
        <span
          class="authcode fr"
          :class="{ gray: authStatus == 1 }"
          @click="getAuthCode"
          >{{ authStatus == 0 ? "获取验证码" : count }}</span
        >
      </div>
      <div
        class="input_line input_password clear"
        :class="{ active: curFocus == 'password' }"
      >
        <label class="fl" for="password">
          <i class="icon sp-mima_nor"></i>
        </label>
        <input
          class="fl"
          :type="display ? 'text' : 'password'"
          @focus="curFocus = 'password'"
          @blur="curFocus = ''"
          name="password"
          v-model.trim="send.password"
          placeholder="输入6～20位密码（区分大小写）"
        />
        <label class="fr" for="password" @click="display = !display">
          <i
            class="icon"
            :class="{ 'sp-bukejian': !display, 'sp-kejian-copy': display }"
          ></i>
        </label>
      </div>
      <div
        class="hint"
        :class="{ error: errors, success: success }"
        v-show="errors || success"
      >
        <i
          class="icon"
          :class="{ 'sp-tixing': errors, 'sp-duihao': success }"
        ></i>
        {{ errors || success }}
      </div>
      <div class="protocol">
        <span
          >注册即同意
          <!-- <a @click="link">⟪天龙博弈用户注册协议⟫</a> -->
          <a @click="link"
            >{{
              send.projectSource
                ? "《约牛股票用户注册协议》"
                : " ⟪天龙博弈用户注册协议⟫"
            }}
          </a>
        </span>
      </div>
    </div>
    <div id="backLogin" v-show="gologin">
      <p>
        <span>{{ reciprocal }}s</span>后将进入登录页面
      </p>
      <input type="submit" value="立即登录" @click="toggleType(0)" />
    </div>
    <input
      type="submit"
      value="注册"
      :class="{ submit5: urlParams.version == 5 }"
      v-show="!gologin"
      @click="submit"
    />
    <p class="member">
      已有账号？<span class="login_ref" @click="toggleType(0)">立即登录</span>
    </p>
    <authCode
      :show.sync="authShow"
      @cancel="authShow = false"
      @showError="showError"
      @confirm="confirm"
    ></authCode>
  </div>
</template>

<script>
const authCode = () => import("./authCode");
import { register } from "../mixins/register";
import { getUrlParams } from "../script/fn";
const { projectSource } = getUrlParams();
import { CLIENT } from "@/common/const";

export default {
  mixins: [register],
  props: {
    show: {
      default: 0,
      type: Number,
    },
  },
  watch: {
    show(num) {
      if (num == 1) {
        this.gologin = false;
      }
    },
  },
  data() {
    return {
      curFocus: "",
      path: CLIENT,
      errors: "",
      success: "",
      authStatus: 0,
      count: "",
      display: 0,
      authShow: false,
      gologin: false,
      reciprocal: 3,
      urlParams: this.$fn.getUrlParams(),
      send: {
        phoneNumber: "",
        phoneAuthCode: "",
        password: "",
        // TODO
        versionCode: "", //版本号
        checkCode: "", //产品校验码
        projectSource: projectSource ? projectSource : "3", //3天龙博弈客户端 7约牛股票客户端
      },
    };
  },

  components: {
    authCode: authCode,
  },

  computed: {},

  mounted() {},
};
</script>
<style lang="scss" scoped>
.registerBox {
  padding-top: 50px;
  padding: 50px 26px 0;
  box-sizing: border-box;
  .title {
    color: #333333;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    position: relative;
    height: 35px;
    margin-bottom: 30px;
    .icon {
      display: inline-block;
      width: 38px;
      height: 4px;
      position: absolute;
      left: 50%;
      margin-top: 8px;
      margin-left: -19px;
      background-image: linear-gradient(to right, #f75153, #f9895c);
      &.icon5 {
        background-image: linear-gradient(90deg, #e1bc96, #deb475, #a17542);
      }
    }
  }
  .input_line {
    width: 306px;
    height: 40px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.3s;
    &.active {
      border: 1px solid #888888;
      input {
        color: #333333;
      }
    }
    label {
      text-align: center;
      height: 100%;
      width: 40px;
      &::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
      .icon {
        display: inline-block;
        vertical-align: middle;
      }
    }
    input {
      box-sizing: border-box;
      font-size: 14px;
      color: #474747;
      height: 38px;
      line-height: 38px;
      outline: none;
      border: none;
    }
  }
  .input_phone {
    margin-bottom: 20px;
    &.active {
      .icon.sp-shouji {
        background-position: -244px -143px;
      }
    }
    input {
      width: 264px;
    }
  }
  .input_phoneAuthCode {
    margin-bottom: 20px;
    &.active {
      .icon.sp-yanzhengma {
        background-position: -244px -93px;
      }
      .authcode {
        border-left: 1px solid #888888;
      }
    }
    input {
      width: 149px;
    }
    .authcode {
      display: inline-block;
      height: 38px;
      width: 99px;
      text-align: center;
      line-height: 38px;
      border-left: 1px solid #bdbdbd;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      color: #ea2827;
      cursor: pointer;
      &.gray {
        color: #888888;
        cursor: no-drop;
      }
    }
  }
  .input_password {
    &.active {
      .icon.sp-mima_nor {
        background-position: 0px -240px;
      }
    }
    input {
      width: 217px;
    }
    label:last-child {
      cursor: pointer;
    }
  }
  #backLogin {
    width: 358px;
    height: 493px;
    text-align: center;
    margin: -50px -26px 0;
    position: relative;
    background: url(../images/zccg_bg.png) no-repeat center;
    img {
      display: inline-block;
    }
    p {
      font-size: 24px;
      color: #fff;
      font-weight: 400;
      text-align: center;
      padding-top: 211px;
      span {
        color: #fff600;
        padding-right: 10px;
      }
    }
    input {
      width: 306px;
      position: absolute;
      bottom: 54px;
      left: 50%;
      margin-left: -153px;
    }
  }
  .hint {
    position: absolute;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    &.error {
      color: #ee7625;
    }
    &.success {
      color: #5592e5;
    }
    .icon {
      position: relative;
      top: 1px;
      display: inline-block;
    }
  }
  .protocol {
    margin-top: 31px;
    font-size: 14px;
    color: #888888;
    font-weight: 400;
    a {
      color: #e32425;
      cursor: pointer;
    }
  }
  input[type="submit"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 306px;
    font-size: 18px;
    font-weight: 400;
    margin-top: 35px;
    font-weight: bold;
    border: none;
    outline: none;
    color: #fff;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    display: block;
    border-radius: 5px;
    background-image: linear-gradient(to right, #f74d50, #f88050);
    &.submit5 {
      background-image: linear-gradient(90deg, #e1bc96, #deb475, #a17542);
    }
  }
  input[type="submit"]:disabled {
    cursor: no-drop;
    background-image: linear-gradient(to right, #f99495, #fab395);
    &.submit5 {
      background: linear-gradient(
        90deg,
        rgba(225, 188, 150, 0.6),
        rgba(222, 180, 117, 0.6),
        rgba(161, 117, 66, 0.6)
      );
    }
  }
  .member {
    padding-top: 16px;
    font-size: 14px;
    color: #666666;
    text-align: right;
    .login_ref {
      color: #5592e5;
      cursor: pointer;
    }
  }
}
</style>
